<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="/house/static/layui/css/layui.css" rel="stylesheet">
  <script src="/house/static/layui/layui.js"></script>
</head>
<body>
<style>
  .layui-form {
    margin-top: 30px;
  }

  .demo-login-container {
    width: 320px;
    margin: 21px auto 0;
  }

  .demo-login-other .layui-icon {
    position: relative;
    display: inline-block;
    margin: 0 2px;
    top: 2px;
    font-size: 26px;
  }
</style>
<form class="layui-form">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <input type="text" name="nickname" value="" lay-verify="required" placeholder="姓名"
               lay-reqtext="请填写姓名" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
               lay-reqtext="请填写用户" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <select name="sex" lay-filter="sex">
          <option value="">性别</option>
          <option value="女">女</option>
          <option value="男">男</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <input type="text" name="phone" value="" placeholder="联系方式" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item" id="login" >
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="addUser" >添加用户</button>
    </div>
  </div>
</form>

<script>
  layui.use(function () {
    let form = layui.form;
    let layer = layui.layer;
    let $ = layui.$;
    // 提交事件
    form.on('submit(addUser)', function (data) {
      let formData = data.field; // 获取表单字段值
      console.log(formData);
      // 此处可执行 Ajax 等操作
      $.ajax({
        url:'/house/user/add',
        data:formData,
        type:'post',
        dataType:'json',
        success:function (res){
          if (res.code==0){
            layer.msg(res.message,{icon:1},function (){
              // 关闭弹出层
              let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
              parent.layer.close(index);
            })
          }else {
            layer.msg(res.message,{icon:2})
          }
        }
      })
      // 再执行关闭
      return false; // 阻止默认 form 跳转
    });

  });
</script>
</body>
</html>